<template>
	<view class="wanl-order-list">
		<view class="navbar">
			<u-tabs :list="navList" lineWidth="32rpx" lineColor="#000000" :activeStyle="{
			            color: '#000000',
			            fontWeight: 'bold',
			            transform: 'scale(1.28)'
			        }" :inactiveStyle="{
			            color: '#999999',
			            transform: 'scale(1)'
			        }" @tap="tabClick" keyName="text"
				itemStyle="padding-left: 29rpx; padding-right: 29rpx; height: 33px;font-size:28rpx;">
			</u-tabs>
			<!-- <view class="nav-item text-df" v-for="(item, index) in navList" :key="index" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)"> {{ item.text }} </view> -->
		</view>
		<swiper :current="tabCurrentIndex" style="height: calc(100% - 60rpx)" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="key">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<wanl-empty text="没有找到任何优惠券" src="ticket_default3x"
						v-if="tag.loaded === true && tag.cardList.length === 0" />
					<!-- 订单列表 -->
					<view class="wanl-coupon">
						<!-- 列表 -->
						<view class="wanl-coupon__item item u-flex-y-center" v-for="(coupon, seat) in tag.cardList"
							@tap="onDetails(coupon)" :key="seat">
							<image src="/static/new/conbg.png" class="wanl-coupon__item__bg"></image>
							<image :src="$wanlshop.appstc('/coupon/img_couponcentre_received_3x.png')"
								class="coupon-sign"></image>
							<view class="wanl-coupon__item__left item-left">
								<!-- <block>
									<view class="colour">
										<text class="text-price" style="font-size: 52rpx;line-height: 52rpx;"></text>
										<text class="price" style="font-size: 73rpx;line-height: 52rpx;">10</text>
									</view>
									<view class="text-sm">
										满100可用
									</view>
								</block> -->
								<block
									v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
									<view class="colour">
										<text class="text-price" style="font-size: 52rpx;line-height: 52rpx;"></text>
										<text class="price"
											style="font-size: 73rpx;line-height: 52rpx;">{{Number(coupon.price)}}</text>
									</view>
									<view class="text-sm">
										满{{Number(coupon.limit)}}可用
									</view>
								</block>

								<block
									v-if="coupon.type == 'discount' || (coupon.type == 'vip' && coupon.usertype == 'discount')">
									<view class="colour">
										<<text class="price">{{Number(coupon.discount)}}</text>
											<text class="discount">折</text>
									</view>
									<view class="text-sm">
										满{{Number(coupon.limit)}}打{{Number(coupon.discount)}}折
									</view>
								</block>
								<block v-if="coupon.type == 'shipping'">
									<view class="colour">
										<text class="price">包邮</text>
									</view>
									<view class="text-sm">
										满{{Number(coupon.limit)}}元包邮
									</view>
								</block>
							</view>
							<view class="wanl-coupon__item__line">

							</view>
							<view class="item-right">
								<view class="shop" @tap="onShop(coupon.shop_id)">
									<view class="" style="line-height: 32rpx;">
										{{coupon.shop.shopname}}
									</view>
									<text class="wlIcon-fanhui2" style="font-size: 22.5rpx;color: #cccccc;"></text>
								</view>
								<view class="title">
									<view class="cu-tag">
										{{coupon.type_text}}
									</view>
									<text class="">{{coupon.name}}</text>
								</view>
								<view class="bt">
									<view class="">
										<view v-if="coupon.grant != '-1'">
											<text class="wlIcon-dot"></text>目前仅剩余 {{coupon.surplus}} 张
										</view>

										<view v-if="coupon.drawlimit != 0">
											<text class="wlIcon-dot"></text>每人仅限领取 {{coupon.drawlimit}} 张
										</view>
										<block v-if="coupon.pretype == 'fixed'">
											<view>
												<text class="wlIcon-dot"></text>生效 {{coupon.startdate}}
											</view>
											<view>
												<text class="wlIcon-dot"></text>结束 {{coupon.enddate}}
											</view>
										</block>

										<block v-if="coupon.pretype == 'appoint'">
											<view v-if="coupon.validity == 0">
												<text class="wlIcon-dot"></text>未使用前 永久 有效
											</view>
											<view v-else>
												<text class="wlIcon-dot"></text>领取后 {{coupon.validity}} 天有效
											</view>
										</block>
									</view>
									<view class="cu-btn sm round"
										style="background-color: #1E1E1E;color: #FFFFFF;font-size: 24rpx;"
										@tap.stop="onApply(coupon.id)" v-if="coupon.state">
										立即使用
									</view>
									<view class="cu-btn sm round"
										style="background-color: #1E1E1E;color: #FFFFFF;font-size: 24rpx;"
										@tap.stop="onReceive(key,seat)" v-else>
										立即领取
									</view>
									<!-- <view class="cu-btn sm round line-colour" @tap.stop="onApply(coupon.id)"
										v-if="coupon.state">
										立即使用
									</view>
									<!-- <view class="cu-btn sm round" @tap.stop="onReceive(key,seat)" v-else>
										立即领取
									</view> -->
								</view>
							</view>

						</view>
						<!-- <view v-for="(coupon, seat) in tag.cardList" :key="seat" :class="coupon.type"
							class="item margin-bj radius-bock" @tap="onDetails(coupon)">
							<image src="/static/new/conbg.png" class="coupon-bg"></image>
							<image :src="$wanlshop.appstc('/coupon/img_couponcentre_received_3x.png')"
								class="coupon-sign" v-if="coupon.state"></image>
							<view class="item-left">
								<block
									v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
									<view class="colour">
										<text class="text-price"></text>
										<text class="price">{{Number(coupon.price)}}</text>
									</view>
									<view class="cu-tag wanl-gray-dark radius text-sm">
										满{{Number(coupon.limit)}}减{{Number(coupon.price)}}
									</view>
								</block>
								<block
									v-if="coupon.type == 'discount' || (coupon.type == 'vip' && coupon.usertype == 'discount')">
									<view class="colour">
										<text class="price">{{Number(coupon.discount)}}</text>
										<text class="discount">折</text>
									</view>
									<view class="cu-tag wanl-gray-dark radius text-sm">
										满{{Number(coupon.limit)}}打{{Number(coupon.discount)}}折
									</view>
								</block>
								<block v-if="coupon.type == 'shipping'">
									<view class="colour">
										<text class="price">包邮</text>
									</view>
									<view class="cu-tag wanl-gray-dark radius text-sm">
										满{{Number(coupon.limit)}}元包邮
									</view>
								</block>
							</view>
							<view class="item-right padding-bj">
								<view class="shop" @tap="onShop(coupon.shop_id)">
									<view class="name">
										<text class="wlIcon-dianpu margin-right-xs"></text> {{coupon.shop.shopname}}
									</view>
									<view>
										<text class="wlIcon-fanhui2"></text>
									</view>
								</view>
								<view class="title">
									<view class="cu-tag sm radius margin-right-xs tagstyle">
										{{coupon.type_text}}
									</view>
									<text class="text-cut wanl-gray text-min">{{coupon.name}}</text>
								</view>
								<view class="content text-min">
									<view class="wanl-gray">

										<view v-if="coupon.grant != '-1'">
											<text class="wlIcon-dot"></text>目前仅剩余 {{coupon.surplus}} 张
										</view>

										<view v-if="coupon.drawlimit != 0">
											<text class="wlIcon-dot"></text>每人仅限领取 {{coupon.drawlimit}} 张
										</view>
										<block v-if="coupon.pretype == 'fixed'">
											<view>
												<text class="wlIcon-dot"></text>生效 {{coupon.startdate}}
											</view>
											<view>
												<text class="wlIcon-dot"></text>结束 {{coupon.enddate}}
											</view>
										</block>
										<block v-if="coupon.pretype == 'appoint'">
											<view v-if="coupon.validity == 0">
												<text class="wlIcon-dot"></text>未使用前 永久 有效
											</view>
											<view v-else>
												<text class="wlIcon-dot"></text>领取后 {{coupon.validity}} 天有效
											</view>
										</block>
									</view>
									<view class="cu-btn sm round line-colour" @tap.stop="onApply(coupon.id)"
										v-if="coupon.state">
										立即使用
									</view>
									<view class="cu-btn sm round" @tap.stop="onReceive(key,seat)" v-else>
										立即领取
									</view>
								</view>
							</view>
						</view> -->
					</view>



					<uni-load-more :status="tag.loadingType" :content-text="contentText" />
					<view class="edgeInsetBottom"></view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
						type: 'reduction',
						text: '满减券',
						loadingType: 'more',
						current_page: 1,
						cardList: []
					},
					{
						type: 'discount',
						text: '折扣券',
						loadingType: 'more',
						current_page: 1,
						cardList: []
					},
					{
						type: 'shipping',
						text: '包邮券',
						loadingType: 'more',
						current_page: 1,
						cardList: []
					}
				],
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: ''
				}
			};
		},
		onLoad(options) {
			this.loadData();
		},
		methods: {
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(e) {
				this.tabCurrentIndex = e.index;
			},
			//获取订单列表
			async loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let type = navItem.type;
				//判断是否最后一页
				if (navItem.loadingType == 'noMore') {
					return;
				}
				//tab切换只有第一次需要加载数据
				if (source === 'tabChange' && navItem.loaded === true) {
					return;
				}
				//防止重复加载
				if (navItem.loadingType === 'loading') {
					return;
				}
				navItem.loadingType = 'loading';
				// 获取列表
				await uni.request({
					url: '/wanlshop/coupon/getList',
					data: {
						type: type,
						page: navItem.current_page
					},
					success: res => {
						navItem.current_page = res.data.current_page; //当前页码
						if (res.data.last_page === res.data.current_page) {
							navItem.loadingType = 'noMore';
						} else {
							navItem.loadingType = 'more';
							navItem.current_page++;
						}
						let cardList = res.data.data.filter(item => {
							item = Object.assign(item, {
								state: false
							});
							return item.type === type;
						});
						cardList.forEach(item => {
							navItem.cardList.push(item);
						});
						//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
						this.$set(navItem, 'loaded', true);
					}
				});
			},
			// 领取优惠券
			async onReceive(key, seat) {
				let coupon = this.navList[key].cardList[seat];
				await uni.request({
					url: '/wanlshop/coupon/receive',
					method: 'POST',
					data: {
						id: coupon.id
					},
					success: res => {
						coupon.id = res.data.id;
						coupon.state = true;
						this.$wanlshop.msg(res.data.msg);
						this.$store.commit('statistics/dynamic', {
							coupon: this.$store.state.statistics.dynamic.coupon + 1
						});
					}
				});
			},
			onApply(id) {
				this.$wanlshop.to(`/pages/user/coupon/apply?id=${id}&state=true`);
			},
			onDetails(data) {
				// this.$wanlshop.to(`/pages/user/coupon/details?data=${JSON.stringify(data)}`);
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.wanl-coupon {
		padding: 0 30rpx;
		
		&__item {
			width: 690rpx;
			height: 268.5rpx;
			position: relative;
margin-bottom: 10rpx;
			&__bg {
				width: 100%;
				height: 268.5rpx;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}

			&__line {
				height: 191rpx;
				border-left: 2rpx dashed #D7D7D7;
				position: relative;
				z-index: 2;
			}
		}
	}

	.text-sm {
		font-family: PingFang-SC, PingFang-SC;
		font-size: 22rpx;
		color: #676767;
		line-height: 22rpx;
		margin-top: 10rpx;
	}

	.price {
		font-family: DINNextLTPro;
	}

	.shop {
		padding: 54rpx 24rpx 20rpx 37rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #1E1E1E;
		line-height: 32rpx;
	}

	.title {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #676767;
		line-height: 24rpx;
		padding-left: 37rpx;

		.cu-tag {
			padding: 0 10rpx;
			height: 30rpx;
			background: #FFC400;
			border-radius: 5rpx 5rpx 5rpx 5rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: normal;
			font-size: 20rpx;
			color: #FFFFFF;
			line-height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.bt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 38rpx 20rpx 0 37rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #676767;
		line-height: 24rpx;
	}
</style>